<div class="box">
    <!-- box / title -->
    <div class="title">
        <h5>Forms</h5>
    </div>
    <!-- end box / title -->
    <form id="form" action="" method="post">
        <div class="form">
            <div class="fields">
                <div class="field  field-first">
                    <div class="label">
                        <label for="input-small">Small Input:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="input-small" name="input.small" class="small" />
                        <div class="button highlight">
                            <input type="submit" name="submit.highlight" value="Submit Empathized" />
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="input-medium">Medium Input:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="input-medium" name="input.medium" class="medium" />
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="input-large">Large Input:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="input-large" name="input.large" class="large" />
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="autocomplete">Auto Complete:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="autocomplete" name="input.autocomplete" value="start typing for example: java" class="small focus" />
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="date">Date Picker:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="date" name="input.date" class="date" />
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="input-error">Error Input:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="input-error" name="input.error" class="small error" />
                        <span class="error">This is a required field.</span>
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="input-valid">Valid Input:</label>
                    </div>
                    <div class="input">
                        <input type="text" id="input-valid" name="input.valid" class="small valid" />
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="select">Select:</label>
                    </div>
                    <div class="select">
                        <select id="select" name="select">
                            <option value="1">Option #1</option>
                            <option value="2">Option #2</option>
                            <option value="3">Option #3</option>
                        </select>
                    </div>
                </div>
                <div class="field">
                    <div class="label label-checkbox">
                        <label>Checkboxes:</label>
                    </div>
                    <div class="checkboxes">
                        <div class="checkbox">
                            <input type="checkbox" id="checkbox-1" name="checkboxex" />
                            <label for="checkbox-1">Option #1</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="checkbox-2" name="checkboxex" />
                            <label for="checkbox-2">Option #2</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" id="checkbox-3" name="checkboxex" />
                            <label for="checkbox-3">Option #3</label>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label label-radio">
                        <label>Radios:</label>
                    </div>
                    <div class="radios">
                        <div class="radio">
                            <input type="radio" id="radio-1" name="radioex" />
                            <label for="radio-1">Option #1</label>
                        </div>
                        <div class="radio">
                            <input type="radio" id="radio-2" name="radioex" />
                            <label for="radio-2">Option #2</label>
                        </div>
                        <div class="radio">
                            <input type="radio" id="radio-3" name="radioex" />
                            <label for="radio-3">Option #3</label>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="label">
                        <label for="file">File:</label>
                    </div>
                    <div class="input input-file">
                        <input type="file" id="file" name="file" size="40" />
                    </div>
                </div>
                <div class="field">
                    <div class="label label-textarea">
                        <label for="textarea">Textarea:</label>
                    </div>
                    <div class="textarea textarea-editor">
                        <textarea id="textarea" name="textarea" cols="50" rows="12" class="editor"></textarea>
                    </div>
                </div>
                <div class="buttons">
                    <input type="submit" name="submit" value="Submit" />
                    <input type="reset" name="reset" value="Reset" />
                    <div class="highlight">
                        <input type="submit" name="submit.highlight" value="Submit Empathized" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>